/*
  学习目标：组件的更新原理
  步骤：
     1. 数据变化了，后代组件都会被更新
     2. 兄弟组件不会受影响
     3. 优化点：后代组件都会被更新 - 等会处理优化的事情
*/

import React from 'react';
export default class App extends React.Component {
  state = {
    count: 0,
  };

  render() {
    return (
      <div>
        <h1>数量： {this.state.count}</h1>
        <button onClick={() => this.setState({ count: this.state.count + 1 })}>
          点我修改数量
        </button>

        <Son></Son>
        <Child></Child>
      </div>
    );
  }
}

class Child extends React.Component {
  state = { msg: 'child' };
  render() {
    console.log('我是Child，我render了 -----> ');
    return (
      <div>
        <button
          onClick={() => {
            this.setState({ msg: '修改了msg' });
          }}
        >
          点我修改 child 的 msg
        </button>
        我是Child
      </div>
    );
  }
}

class Son extends React.Component {
  render() {
    console.log('我是Son，我render了 -----> ');
    return <div>我是Son</div>;
  }
}
